<template>
	<view>
		<maps></maps>
			<div class="container">
				<ul class="typeSlide">
					<li v-for="(item,index) in typeList" @tap.stop="switchover(index)" :class="index==indexs? 'box':''">{{item}}</li>
				</ul>
			</div>
			<!-- 地图定位点，点击详情页面       临时样式 -->
			<button style="width: 200px; position: absolute; top: 200px; left: 50px;">地图定位点详情</button>
			<!-- /地图定位点，点击详情  -->
			<view class="range" v-show="indexs==0? true:false">
				<view class="range-value">50cm以上</view>
				<view class="range-value">30-50cm</view>
				<view class="range-value">＜30cm</view>
			</view>
			<hydrops v-show="indexs==0? true:false"></hydrops>
			<project v-show="indexs==1? true:false"></project>
			<!-- 底部导航 -->
			<u-tabbar  :list="tabbarList" height="40px"></u-tabbar>
		</view>
	</view>
</template>

<script>
	import maps from "../../components/common/map.vue";
	import hydrops from "./hydrops/hydrops.vue"
	import project from "./project/project.vue"
	export default {
		data() {
			return {
				indexs:0,
				typeList:["积水险情","工程险情"],
				arr:[
					{template:"<hydrops></hydrops>"},
				]
			}
		},
		methods: {
			switchover(index){
				this.indexs=index
			}
			
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		components:{
			maps,
			hydrops,
			project
		}
	}
</script>

<style lang="scss">
.container{
	.typeSlide{
		 position: absolute;
		 right: 20px;
		 top: 20px;
		li{
			display: flex;
			border: 1px solid #ddd;
			align-items: center;
			box-sizing: border-box;
			padding: 0 11px;
			margin-bottom: 10px;
			width: 4rem;
			height: 4rem;
			text-align: center;
			background-color: #fff;
			z-index: 500;
		}
		.box{
			background-color: #007AFF;
			color: #FFFFFF
		}
	}
}
.range{
	width: 7rem;
	height: 169px;
	border: 1px solid #000000;
	position: absolute;
	background-color: #FFFFFF;
	box-sizing: border-box;
	bottom: 12rem;
	left: 1rem;
	.range-value{
		width: 100%;
		height: 56px;
		line-height: 56px;
	}
}

</style>
